/**
 * 虚拟化文档列表组件
 * 使用虚拟列表技术优化大量文档的展示性能
 */

import React, { useMemo, useCallback } from 'react';
import { List } from 'antd';
import { VirtualList, VirtualListItemProps } from '../../components/VirtualList';
import { DocumentListItem } from './DocumentListItem';
import { Content } from '../../../types/document';

interface VirtualizedDocumentListProps {
  documents: Content[];
  onOpen: (documentId: string) => void;
  onDelete: (documentId: string, title: string) => void;
  onConvertToStoryboard?: (documentId: string) => void;
  containerHeight?: number;
  itemHeight?: number;
  className?: string;
  loading?: boolean;
  selectionMode?: boolean;
  selectedIds?: Set<string>;
  onToggleSelect?: (documentId: string) => void;
}

const DOCUMENT_ITEM_HEIGHT = 120; // 文档项的固定高度
const DEFAULT_CONTAINER_HEIGHT = 600; // 默认容器高度

export const VirtualizedDocumentList: React.FC<VirtualizedDocumentListProps> = ({
  documents,
  onOpen,
  onDelete,
  onConvertToStoryboard,
  containerHeight = DEFAULT_CONTAINER_HEIGHT,
  itemHeight = DOCUMENT_ITEM_HEIGHT,
  className = '',
  loading = false,
  selectionMode = false,
  selectedIds = new Set(),
  onToggleSelect
}) => {

  // 渲染单个文档项
  const renderDocumentItem = useCallback((props: VirtualListItemProps<Content>) => {
    const { item: document, style, index } = props;

    return (
      <div key={document.id} style={style} className="virtual-list-item">
        <div style={{ padding: '8px 0' }}>
          <DocumentListItem
            document={document}
            onOpen={() => onOpen(document.id)}
            onDelete={() => onDelete(document.id, document.title)}
            onConvertToStoryboard={onConvertToStoryboard ? () => onConvertToStoryboard(document.id) : undefined}
            selectionMode={selectionMode}
            isSelected={selectedIds.has(document.id)}
            onToggleSelect={onToggleSelect ? () => onToggleSelect(document.id) : undefined}
          />
        </div>
      </div>
    );
  }, [onOpen, onDelete, onConvertToStoryboard, selectionMode, selectedIds, onToggleSelect]);

  // 计算是否应该启用虚拟化
  const shouldVirtualize = useMemo(() => {
    return documents.length >= 20; // 文档数量超过20个时启用虚拟化
  }, [documents.length]);

  // 性能监控回调
  const handleVisibleRangeChange = useCallback((startIndex: number, endIndex: number) => {
    console.log(`[文档列表虚拟化] 可见范围: ${startIndex} - ${endIndex}, 总计: ${documents.length}`);
  }, [documents.length]);

  // 如果文档数量较少，使用常规Ant Design List
  if (!shouldVirtualize) {
    return (
      <List
        dataSource={documents}
        split={false}
        loading={loading}
        style={{ backgroundColor: 'transparent' }}
        className={className}
        renderItem={(doc) => (
          <DocumentListItem
            key={doc.id}
            document={doc}
            onOpen={() => onOpen(doc.id)}
            onDelete={() => onDelete(doc.id, doc.title)}
            onConvertToStoryboard={onConvertToStoryboard ? () => onConvertToStoryboard(doc.id) : undefined}
            selectionMode={selectionMode}
            isSelected={selectedIds.has(doc.id)}
            onToggleSelect={onToggleSelect ? () => onToggleSelect(doc.id) : undefined}
          />
        )}
      />
    );
  }

  // 使用虚拟列表优化性能
  return (
    <div className={`virtualized-document-list ${className}`}>
      <VirtualList
        items={documents}
        containerHeight={containerHeight}
        itemHeight={itemHeight}
        renderItem={renderDocumentItem}
        overscan={5} // 预渲染5个额外项目
        onVisibleRangeChange={handleVisibleRangeChange}
        enableVirtualization={true}
        scrollThrottleMs={16} // 16ms节流，约60fps
      />
    </div>
  );
};

export default VirtualizedDocumentList;